<template>
	<view class="table-container" style="max-height: 60vh;">
		<uni-table type="selection" emptyText="暂无更多数据">
			<uni-tr class="table-head">
				<uni-th align="center" width="30">ID</uni-th>
				<uni-th>封面</uni-th>
				<uni-th>名称</uni-th>
				<uni-th>分类</uni-th>
				<uni-th>SKU</uni-th>
				<uni-th>单价</uni-th>
				<uni-th>库存</uni-th>
				<uni-th>状态</uni-th>
				<uni-th>上架</uni-th>
				<uni-th> <text class="gl-link gl-link-base" @click="refresh">刷新</text> </uni-th>
			</uni-tr>
			<template v-for="(item, index) in goodsArray" :key="index">
				<uni-tr v-for="(sku, idx) in item.specs" :key="'sku'+idx">
					<uni-td v-if="idx===0" :rowspan="item.specs.length ?? 1" align="center"
						width="30">{{item.id}}</uni-td>
					<uni-td v-if="idx===0" :rowspan="item.specs.length ?? 1">
						<image :src="sConf.cos + (item.face ?? '/media/default/cover.png')" mode="scaleToFill"
							style="width: 96px;height: 96px;border-radius: 5px;"></image>
					</uni-td>
					<uni-td v-if="idx===0" :rowspan="item.specs.length ?? 1">{{item.name}}</uni-td>
					<uni-td v-if="idx===0" :rowspan="item.specs.length ?? 1">{{item.max_mode.name}} ->
						{{item.min_mode.name}}</uni-td>
					<uni-td>{{sku.name}}</uni-td>
					<uni-td>{{(sku.money / 100).toFixed(2)}}</uni-td>
					<uni-td>{{sku.fund}}</uni-td>
					<uni-td>
						<switch :checked="sku.status === 1" style="transform:scale(0.5)"
							@change="event => EventStateChange(event, sku.id)" />
					</uni-td><uni-td>
						<switch :checked="sku.is_line === 1" style="transform:scale(0.5)"
							@change="event=>EventListChange(event, sku.id)" />
					</uni-td>
					<uni-td>
						<text>编辑暂未开放</text>
					</uni-td>
				</uni-tr>

			</template>
		</uni-table>
		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="refresh" />
		</view>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	export default {
		data() {
			return {
				title: '产品列表',
				sConf: getApp().globalData,
				count: 0, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页
				goodsArray: []
			}
		},
		beforeDestroy() {
			console.log('beforeDestroy ...');
		},
		props: {
			pid: {
				type: Number,
				default: 1
			}
		},
		methods: {
			open(e) {
				this.refresh()
			},
			refresh() {
				let data = {
					pid: this.pid,
					page: this.page
				}
				psMethod.syncAuthenticatorRequest('/admin/cargoList/', 'GET', this.sConf.auth.token, data).then(res => {
					console.log('加载商品列表', res);
					if (this.page > 1) {
						let tmpData = this.goodsArray.concat(res.resmsg)
						this.goodsArray = tmpData
					} else {
						this.goodsArray = res.resmsg
						this.count = res.count
						this.size = res.size
					}
				}).catch(err => {
					if (err.rescode === 404 && this.page > 1) {
						this.page -= 1
					}
				})
			},
			EventStateChange(e, index) {
				console.log('EventStateChange', e.detail.value, index);				
				let token = this.sConf.auth.token || '';
				let data = {
					status: e.detail.value ? 1 : 0
				}
				psMethod.syncAuthenticatorRequest(`/admin/cargoSku/${index}/`, 'PATCH', token, data).then(res => {
					console.log('修改状态', res);
				}).catch(err => {
					console.log('修改状态', err);
					uni.showToast({
						title: '请求失败'
					})
				})


			},
			EventListChange(e, index) {
				console.log('EventListChange', e.detail.value);				
				let token = this.sConf.auth.token || '';
				let data = {
					is_line: e.detail.value ? 1 : 0
				}
				psMethod.syncAuthenticatorRequest(`/admin/cargoSku/${index}/`, 'PATCH', token, data).then(res => {
					console.log('修改上架', res);
				}).catch(err => {
					console.log('修改上架', err);
					uni.showToast({
						title: '请求失败'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>